<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学生</title>
    <#-- 1、引入bs的css样式-->
    <link rel="stylesheet" href="/webjars/bootstrap/3.4.1/css/bootstrap.min.css">
    <#-- 2、引入jquery依赖-->
    <script src="/webjars/jquery/3.6.0/jquery.min.js"></script>
    <#--  3、引入bs的js库-->
    <script src="/webjars/bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <#--  4. 自定义格式-->
    <style>
        .table {
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="panel panel-primary">
        <#-- 页头-->
        <div class="panel-heading">
            <h3 class="panel-title">
                <h3>Dubbo + SSM + Freemarker + WebJars</h3>
            </h3>
        </div>
        <#-- 内容-->
        <table class="table table-striped table-hover">
            <tr>
                <td>学号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
                <td>住址</td>
                <td>班级</td>
                <td>操作</td>
            </tr>

            <#list students as stud>
                <tr>
                    <td>${stud.sid}</td>
                    <td>${stud.sname}</td>
                    <td>${stud.sex}</td>
                    <td>${stud.age}</td>
                    <td>${stud.addr}</td>
                    <td>${stud.cname}</td>
                    <td>
                        <div class="btn-group">
                            <a class="btn btn-success btn-sm"
                               onclick="showDialog('${stud.sid}','${stud.sname}','${stud.sex}','${stud.age}','${stud.addr}','${stud.cid}')">
                                <span class="glyphicon glyphicon-pencil"></span>
                            </a>
                            <a href="/student1/delete.do?sid=${stud.sid}" class="btn btn-danger btn-sm"
                               onclick="return confirm('你真的要删除吗?')">
                                <span class="glyphicon glyphicon-trash"></span>
                            </a>
                        </div>
                    </td>
                </tr>
            </#list>
        </table>
        <#-- 页尾-->
        <div class="panel-footer text-right">
            <#-- 条件查询 -->
            <form class="form-inline" style="float:left">
                <div class="form-group">
                    <input type="text" class="form-control" id="exampleInputName2" placeholder="名字/名字里带有的字">
                </div>
                <div class="form-group">
                    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="地址/地址中包含的字">
                </div>
                <div class="form-group">
                    <div class="col-sm-10">
                        <select class="form-control" name="cid" id="cid">
                            <#list classes as c>
                                <option value="${c.cid}">${c.cname}</option>
                            </#list>
                        </select>
                    </div>
                </div>
                <button type="submit" class="btn btn-default">查询</button>
            </form>
            <#--  分页（https://www.bootcss.com/的分页）  -->
            <nav>
                <ul class="pagination" style="float: right;margin-top: 0px;margin-right: 20px;">
                    <li>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>

            <#--  添加数据  -->
            <a class="btn btn-info btn-sm" onclick="showDialog()">添加信息</a>
            学生后端管理
        </div>
    </div>
</div>


<div class="modal fade" id="myModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="title">编辑</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="form1" action="/student1/add.do" method="post">
                    <input type="hidden" name="sid" id="sid">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">姓名:</label>
                        <div class="col-sm-10">
                            <input type="text" name="sname" id="sname" class="form-control" placeholder="姓名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">性别:</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="sex" id="sex1" value="男" checked> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="sex" id="sex2" value="女"> 女
                            </label>

                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">年龄:</label>
                        <div class="col-sm-10">
                            <input type="text" name="age" id="age" class="form-control" placeholder="年龄">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">地址:</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="addr" name="addr" placeholder="住址">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">班级:</label>
                        <div class="col-sm-10">
                            <select class="form-control" name="cid" id="cid">
                                <option value="0">所有班级</option>
                                <#list classes as c>
                                    <option value="${c.cid}">${c.cname}</option>
                                </#list>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭(C)</button>
                <button type="button" class="btn btn-primary" onclick="save()">保存(S)</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>

<script>
    // 1、添加数据（添加或修改）
    function save() {
        // 1.1、提交表单
        $("#form1").submit();
    }

    // 2、修改对话框
    function showDialog(sid, sname, sex, age, addr, cid) {
        // 2.1、为表单设置值
        $("#sid").val(sid);
        $("#sname").val(sname);
        // 设置性别
        if (sex == '男') {
            $("#sex1").prop("checked", true);
        } else {
            $("#sex2").prop("checked", true);
        }
        $("#age").val(age);
        $("#addr").val(addr);
        $("#cid").val(cid);

        // 2.2、定义添加或修改的url地址
        let url = "/student1/add.do";
        // 2.2.1、判断sid是否有值（有：修改；无：添加）
        if (sid) {
            url = "/student1/update.do"
            // 修改标题
            $("#title").text("修改学生");

        } else {
            // 2.2.2、清空表单数据
            console.log("add....")
            // 修改标题
            $("#title").text("添加学生");
            // 重置表单数据
            $("#form1")[0].reset();  // $("#form1")[0]: 将jquery对象转换为dom对象
        }
        // 2.3、显示对话框
        $('#myModal').modal('show')

        // 2.4、修改表单的url地址
        $("#form1")[0].action = url;
    }
</script>